<template>
  <div>
    <div class="banner" @click="handleBannerClick">
      <img class="banner-img" :src="bannerImg" >
      <div class="banner-info">
        <div class="banner-title">
          {{this.sightName}}
        </div>
        <div class="banner-number">
          <span class="iconfont banner-icon">&#xe640;</span>
          {{this.gallaryImgs.length}}
        </div>
      </div>
    </div>
    <FadeAnimation>
      <CommonGallary 
        :imgs="gallaryImgs" v-show="showGallary" @close="handleGallaryClose">
      </CommonGallary>
    </FadeAnimation>
  </div> 
</template>

<script>
//导入图片放大组件
import CommonGallary from 'common/gallary/Gallary.vue'
//导入画廊动画组件
import FadeAnimation from 'common/fade/animation.vue'

export default {
  data(){
    return{
      showGallary:false,//默认图片画廊关闭
    }
  },
  props:{
    sightName:String,
    bannerImg:String,
    gallaryImgs:Array
  },
  methods:{
    handleBannerClick(){//点击展现图片画廊
      this.showGallary=true
    },
    handleGallaryClose(){//再次点击关闭图片画廊
      this.showGallary=false
    }
  },
  components:{
    CommonGallary,
    FadeAnimation
  }
}
</script>

<style lang="stylus" scoped>
  .banner
    position:relative;
    overflow :hidden;
    height :0;
    padding-bottom:55%;
    .banner-img
      width :100%;
    .banner-info
      display :flex;
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      line-height:0.6rem;
      color:#fff;
      background-image :linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8))
      .banner-title
        flex:1;
        font-size :0.32rem;
        padding :0 0.2rem;
      .banner-number
        height :0.32rem;
        line-height :0.32rem;
        padding :0 0.4rem;
        margin-top:0.14rem; 
        border-radius:0.2rem;
        background-color :rgba(0,0,0,0.5)
        font-size :0.24rem;
        .banner-icon
          font-size :0.24rem;
</style>
